import {
  LoginFormPage,
  ProConfigProvider,
} from '@ant-design/pro-components';
import {Link, useRequest, history} from '@umijs/max';
import {Button, Col, Form, Input, Popover, Progress, Row, Select, Space, message, theme, Tabs} from 'antd';
import React, {useEffect, useState} from 'react';
import useStyles from './style.style';
import {fakeRegister, sendCode} from './service';
import bg from '../images/bg.png'
//@ts-ignore
import bgVideo from '../images/bg_video.mp4'

const FormItem = Form.Item;
const {Option} = Select;

const passwordProgressMap: {
  ok: 'success';
  pass: 'normal';
  poor: 'exception';
} = {
  ok: 'success',
  pass: 'normal',
  poor: 'exception',
};

type RegisterType = 'phone' | 'email';

const CodeButton = ({form}: any) => {
  const {styles} = useStyles();
  const [count, setCount]: [number, any] = useState(0);
  let interval: number | undefined;

  const onGetCaptcha = async () => {
    const values = await form.validateFields(['captcha', 'identifier'])
    if (!values.captcha) {
      return
    }
    const res = await sendCode({captcha: values.captcha, to: values.identifier, type: 'USER_REGISTER'})
    if(res.code === 0) {
      message.success('发送验证码成功！');
    }
    let counts = 59;
    setCount(counts);
    interval = window.setInterval(() => {
      counts -= 1;
      setCount(counts);
      if (counts === 0) {
        clearInterval(interval);
      }
    }, 1000);
  };

  useEffect(
    () => () => {
      clearInterval(interval);
    },
    [interval],
  );

  return <Button
    size="large"
    disabled={!!count}
    className={styles.getCaptcha}
    onClick={onGetCaptcha}
  >
    {count ? `${count} s` : '获取验证码'}
  </Button>
}

const Page = () => {
  const [registerType, setRegisterType] = useState<RegisterType>('phone');
  const {token} = theme.useToken();
  const {styles} = useStyles();
  const [open, setVisible]: [boolean, any] = useState(false);
  const [prefix, setPrefix]: [string, any] = useState('86');
  const [time, setTime] = useState(Date.now())
  const confirmDirty = false;

  const passwordStatusMap = {
    ok: (
      <div className={styles.success}>
        <span>强度：强</span>
      </div>
    ),
    pass: (
      <div className={styles.warning}>
        <span>强度：中</span>
      </div>
    ),
    poor: (
      <div className={styles.error}>
        <span>强度：太短</span>
      </div>
    ),
  };

  const [form] = Form.useForm();

  const getPasswordStatus = () => {
    const value = form.getFieldValue('password');
    if (value && value.length > 9) {
      return 'ok';
    }
    if (value && value.length > 5) {
      return 'pass';
    }
    return 'poor';
  };

  const {loading: submitting, run: register} = useRequest(fakeRegister, {
    manual: true,
    onSuccess: (res, params) => {
      console.log(res,params);
      if (res.code === 0) {
        message.success('注册成功！');
        if (registerType === 'email') {
          history.push({
            pathname: `/user/register-result?account=${params[0]?.identifier}`,
          });
        }
      }
    },
  });

  const checkConfirm = (_: any, value: string) => {
    const promise = Promise;
    if (value && value !== form.getFieldValue('credential')) {
      return promise.reject('两次输入的密码不匹配!');
    }
    return promise.resolve();
  };

  const checkPassword = (_: any, value: string) => {
    const promise = Promise;
    // 没有值的情况
    if (!value) {
      setVisible(true);
      return promise.reject('请输入密码!');
    } else {
      // 有值的情况
      if (value.length < 6) {
        setVisible(true);
        return promise.reject('');
      }
      setVisible(false);
      if (value && confirmDirty) {
        form.validateFields(['confirm']);
      }
    }
    return promise.resolve();
  };

  const changePrefix = (value: string) => {
    setPrefix(value);
  };

  const renderPasswordProgress = () => {
    const value = form.getFieldValue('password');
    const passwordStatus = getPasswordStatus();
    return value && value.length ? (
      <div className={styles[`progress-${passwordStatus}`]}>
        <Progress
          status={passwordProgressMap[passwordStatus]}
          strokeWidth={6}
          percent={value.length * 10 > 100 ? 100 : value.length * 10}
          showInfo={false}
        />
      </div>
    ) : null;
  };

  const PhoneNode = ({
                       onChange,
                       value
                     }: any) => {
    return <Space.Compact style={{width: '100%'}}>
      <Select
        size="large"
        value={prefix}
        onChange={changePrefix}
        style={{
          width: '30%',
        }}
      >
        <Option value="86">+86</Option>
      </Select>

      <Input size="large" placeholder="手机号" onChange={onChange} value={value}/>
    </Space.Compact>
  }

  return (
    <div
      style={{
        backgroundColor: 'white',
        height: '100vh',
      }}
    >
      <LoginFormPage
        form={form}
        backgroundImageUrl={bg}
        logo="/logo.svg"
        backgroundVideoUrl={bgVideo}
        title="烟蓝云测"
        containerStyle={{
          backgroundColor: 'rgba(0, 0, 0,0.65)',
          backdropFilter: 'blur(4px)',
        }}
        subTitle="一键加速测试，质效双赢"
        activityConfig={{
          style: {
            boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.2)',
            color: token.colorTextHeading,
            borderRadius: 8,
            backgroundColor: 'rgba(255,255,255,0.25)',
            backdropFilter: 'blur(4px)',
          },
          title: '简化测试繁琐，加速产品飞跃。',
          subTitle: '加入烟蓝自动化测试平台体验日，探索统一接口、UI及压力测试新境界。无论公有云还是私有云环境，可视化编排让测试流程自如流转。自动生成报告，精准把控软件质量，缩短交付周期。让我们携手，让测试更智能，更高效！',
          action: (
            <Button
              size="large"
              style={{
                borderRadius: 20,
                background: 'rgba(0,0,0,.1)',
                color: '#fff',
                width: 120,
              }}
            >
              去看看
            </Button>
          ),
        }}
        initialValues={{
          // username: '云测用户'
        }}
        onFinish={async (values) => {
          await register({...values, identityType: registerType});
        }}
        submitter={{
          render: () => <></>
        }}
      >
        <Tabs
          centered
          activeKey={registerType}
          onChange={(activeKey) => {
            setRegisterType(activeKey as RegisterType)
          }}
        >
          <Tabs.TabPane key={'phone'} tab={'手机号注册'}/>
          <Tabs.TabPane key={'email'} tab={'邮箱注册'}/>
        </Tabs>
        <FormItem
          name="username"
          rules={[
            {
              required: false,
              message: '请输入用户昵称!',
            },
          ]}
        >
          <Input allowClear size="large" placeholder="用户昵称"/>
        </FormItem>
        {registerType === 'email' && <>
          <FormItem
            name="identifier"
            rules={[
              {
                required: true,
                message: '请输入邮箱地址!',
              },
              {
                type: 'email',
                message: '邮箱地址格式错误!',
              },
            ]}
          >
            <Input allowClear size="large" placeholder="邮箱"/>
          </FormItem>
          <Popover
            getPopupContainer={() => {
              return document.body
            }}
            content={
              open && (
                <div
                  style={{
                    padding: '4px 0',
                  }}
                >
                  {passwordStatusMap[getPasswordStatus()]}
                  {renderPasswordProgress()}
                  <div
                    style={{
                      marginTop: 10,
                    }}
                  >
                    <span>请至少输入 6 个字符。请不要使用容易被猜到的密码。</span>
                  </div>
                </div>
              )
            }
            overlayStyle={{
              width: 240,
            }}
            placement="right"
            open={open}
          >
            <FormItem
              name="credential"
              className={
                form.getFieldValue('pwd') &&
                form.getFieldValue('pwd').length > 0 &&
                styles.password
              }
              rules={[
                {
                  validator: checkPassword,
                },
              ]}
            >
              <Input allowClear size="large" type="password" placeholder="至少6位密码，区分大小写"/>
            </FormItem>
          </Popover>
          <FormItem
            name="confirm"
            rules={[
              {
                required: true,
                message: '确认密码',
              },
              {
                validator: checkConfirm,
              },
            ]}
          >
            <Input allowClear size="large" type="password" placeholder="确认密码"/>
          </FormItem>
        </>}

        {registerType === 'phone' && <>
          <FormItem
            name="identifier"
            rules={[
              {
                required: true,
                message: '请输入手机号!',
              },
              {
                pattern: /^\d{11}$/,
                message: '手机号格式错误!',
              },
            ]}
          >
            <PhoneNode/>
          </FormItem>

          {/* 图形验证码 */}
          <Row gutter={8}>
            <Col span={16}>
              <FormItem
                name="captcha"
                rules={[
                  {
                    required: true,
                    message: '请输入图形验证码!',
                  },
                ]}
              >
                <Input size="large" placeholder="图形验证码"/>
              </FormItem>
            </Col>
            <Col span={8}>
              <a onClick={() => {
                setTime(Date.now())
              }}>
                <img width={104} height={40} src={`/account-service/api/v1/notify/captcha?time=${time}`}
                     alt={'图形验证码'}/>
              </a>
            </Col>
          </Row>

          {/* 手机验证码 */}
          <Row gutter={8}>
            <Col span={16}>
              <FormItem
                name="code"
                rules={[
                  {
                    required: true,
                    message: '请输入验证码!',
                  },
                ]}
              >
                <Input size="large" placeholder="验证码"/>
              </FormItem>
            </Col>
            <Col span={8}>
              <CodeButton form={form}/>
            </Col>
          </Row>

        </>}

        <FormItem>
          <div className={styles.footer}>
            <Button
              size="large"
              loading={submitting}
              className={styles.submit}
              type="primary"
              htmlType="submit"
            >
              <span>注册</span>
            </Button>
            <Link to="/user/login">
              <span>使用已有账户登录</span>
            </Link>
          </div>
        </FormItem>
      </LoginFormPage>
    </div>
  );
};

export default () => {
  return (
    <ProConfigProvider dark>
      <Page/>
    </ProConfigProvider>
  );
};
